.find-your-container {
    height: 469px;
}

.initial-container, .find-your-container{
    width: 440px;
    max-width: 440px;
    position: relative;
    margin: 100px auto;
    background-color: rgba(1, 1, 1, 0.2) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: center;
    border-radius: 0px;
    box-shadow: 
        inset -10px 0px 10px rgba(47, 46, 46, 0.3), 
        inset 10px 0px 10px rgba(47, 46, 46, 0.3),
        inset 0px -10px 10px rgba(47, 46, 46, 0.3), 
        inset 0px 10px 10px rgba(47, 46, 46, 0.3);
    transition: height 0.3s ease;
}

.initial-container{
    height: 408px;
}

.language-dropdown {
    top: 20px;
    left: 20px;
    width: 90%;
}

.bg-color-grey {
    background-color: #f2f2f2;
}

.select-category-dropdown {
    bottom: 44px;
    width: 100%;
}

.welcome-dropdown {
    text-align: right;
    position: absolute;
    /* left: 0; */
    box-sizing: border-box;
    overflow: hidden;
}


.welcome-select {
    font-size: 23px;
    height: 35px !important;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 0px;
}

.find-your-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    bottom: 2.4px;
    height: 27px !important;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 0px;
    color: #fff;
}


/* Search box styling */
.find-your-search-box {
    bottom: 2.7px;
    display: flex;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
}

.find-your-search-box {
    transform: translateX(100%);
    opacity: 0;
}

.find-your-search-box[style*="display: flex"] {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
    animation: slideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.find-your-search-box input[type="text"] {
    flex-grow: 1;
}

.find-your-search-box button {
    background-color: #007bff;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
}

.find-your-search-box button i {
    margin: 0;
}

.post-your-text, .initial-text {
    left: 20px;
}

.find-your-text, .post-your-text, .initial-text {
    /* Use the language-specific size provided by JS; default to 117.5px (English desktop) */
    font-size: var(--lang-font-size, 110px);
    position: absolute;
    top: 70px;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.find-your-text{
    width: 400px;
    max-width: 400px;
    height: 205px;
    max-height: 232px;
}

.initial-text, .post-your-text{
    width: 400px;
    max-width: 400px;
    height: 232px;
    max-height: 232px; 
}

.find-your-multicolor-text, .post-your-multicolor-text, .initial-multicolor-text {    
    display: inline-block;
    width: 100%;
    height: 100%;
    letter-spacing: 0;
}

.find-your-multicolor-text span {
    display: inline;
    line-height: inherit;
}

.find-your-dots {
    position: absolute;
    bottom: 116px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 78px;
}

.find-your-dots div {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
}
.find-your-post-wrapper{
    font-family: "Rubik Mono One";
    text-shadow: 
        1px 1px 0 #000, 
        2px 2px 0 #000, 
        3px 3px 0 #000, 
        4px 4px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    padding: 6px 6px 0px 0px;
    margin: 78px 1px 20px 1px;
    border-radius: 10px;
    background: linear-gradient(145deg, #d9d9d9, #f2f2f2);
    /* box-shadow:  */
      /*  inset -6px -6px 5px rgba(0, 0, 0, 0.35),    right + bottom soft shadow for 3D */
      /*  inset 3px 3px 6px rgba(255, 255, 255, 0.9);  top + left soft light inset */

    box-shadow: 
    inset -6px 0 5px rgba(47, 46, 46, 0.4), /* left inner shadow */
    inset 6px 0 5px rgba(47, 46, 46, 0.4),  /* right inner shadow */
    inset 0 -7px 5px rgba(47, 46, 46, 0.6),  /* bottom inner shadow */   

    -3px 0 7px rgba(47, 46, 46, 0.4)     ,    /* left outer highlight */
    3px 0 7px rgba(47, 46, 46, 0.4)     ,          /* right outer shadow */
    0 6px 8px rgba(47, 46, 46, 0.6)         /* bottom outer shadow */
    ;
    color: #222;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    /* border: 1px solid rgba(0, 0, 0, 0.05); */
    user-select: none;
    height: 106px;
    max-width: 398px;
    white-space: nowrap;
    align-content: center;
    overflow: hidden;
}
.find-wrapper, .post-wrapper {
    font-family: "Rubik Mono One";
    text-shadow: 
        1px 1px 0 #000, 
        2px 2px 0 #000, 
        3px 3px 0 #000, 
        4px 4px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    padding: 6px 6px 0px 0px;
    margin: 0px 1px 20px 1px;
    border-radius: 10px;
    background: linear-gradient(145deg, #d9d9d9, #f2f2f2);
    /* box-shadow:  */
      /*  inset -6px -6px 5px rgba(0, 0, 0, 0.35),    right + bottom soft shadow for 3D */
      /*  inset 3px 3px 6px rgba(255, 255, 255, 0.9);  top + left soft light inset */

    box-shadow: 
    inset -6px 0 5px rgba(47, 46, 46, 0.4), /* left inner shadow */
    inset 6px 0 5px rgba(47, 46, 46, 0.4),  /* right inner shadow */
    inset 0 -7px 5px rgba(47, 46, 46, 0.6),  /* bottom inner shadow */   

    -3px 0 7px rgba(47, 46, 46, 0.4)     ,    /* left outer highlight */
    3px 0 7px rgba(47, 46, 46, 0.4)     ,          /* right outer shadow */
    0 6px 8px rgba(47, 46, 46, 0.6)         /* bottom outer shadow */
    ;
    color: #222;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(1, 1, 1, 0.6);
    user-select: none;
    height: 106px;
    max-width: 398px;
    white-space: nowrap;
    align-content: center;
    overflow: hidden;
}


/* .find-wrapper:not(.active)::before,
.post-wrapper:not(.active)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 245, 220, 0.6), 
        transparent 90%
    );
    pointer-events: none;
    z-index: 1;
    filter: blur(3px);
} */

/* .find-wrapper:not(.active)::after,
.post-wrapper:not(.active)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
        to top,
        rgba(255, 240, 210, 0.4), 
        transparent 80%
    );
    filter: blur(4px);
    z-index: 0;
    pointer-events: none;
} */

.find-wrapper:hover, .post-wrapper:hover {
    /* background: linear-gradient(145deg, #f9f9f9, #eaeaea);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05),
        0px 10px 14px rgba(0, 0, 0, 0.25); */
    transform: translateY(-2px);
}

.find-wrapper.active, .post-wrapper.active {
    background: linear-gradient(145deg, #d1d1d1, #bfbfbf); 
    /* box-shadow: 
        inset 4px 4px 5px rgba(47, 46, 46, 0.6),     deeper but not black, for 3D effect 
        inset -6px -6px 10px rgba(255, 255, 255, 0.6);  */
    box-shadow: 
    inset -6px 0 5px rgba(47, 46, 46, 0.6), /* left inner shadow */
    inset 6px 0 5px rgba(47, 46, 46, 0.6),  /* right inner shadow */
    inset 0 7px 5px rgba(47, 46, 46, 0.8),  /* top inner shadow */   

    -3px 0 7px rgba(47, 46, 46, 0.4)     ,    /* left outer highlight */
    3px 0 7px rgba(47, 46, 46, 0.4)     ,          /* right outer shadow */
    0 6px 8px rgba(47, 46, 46, 0.6)         /* bottom outer shadow */
    ;
} 
.initialHideShowImage, .findHideShowImage, .postHideShowImage{
    position: absolute;
    z-index: 1000;
    height: 90px;
}

.initialHideShowImage{
    margin-top: 310px;
    margin-left: 35px;
}

.findHideShowImage{
    bottom: 10px;
}

.postHideShowImage{
    margin-left: 30px;
    bottom: 8px;
}

.HideShowImages{
    display: flex;
    justify-content: space-between;
    /* margin-top: 5px; */
}

.bottom-right-text{
    font-size: 10px;
    padding: 5px 5px;
    color: #333;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .find-your-container, .initial-container {
        width: 100%;
    }
    /* .find-your-container {
        height: 428px;
    }
    .initial-container {
        height: 348px;
    } */
    .find-your-text, .initial-text {
        width: 90%;
    }
    .post-your-text {
        width: 90% !important;
    }
    .remaining-content {
        margin: 0 0 0 2.4%;
    }
    #about_icon{
        width: 14% !important;
    }

    #spinning_globe{
        width: 23% !important;
    }

    #d_img {
        width: 25% !important;
        height: 80px !important;
    }

    #sos_img {
        width: 20% !important;
        height: 80px !important;
    }

    .initialHideShowImage{
        margin-left: 0;
    }
    
    .findHideShowImage{
        margin-left: 0;
    }
    
    .postHideShowImage{
        margin-left: 5%;
    }
    .initialHideShowImage, .findHideShowImage, .postHideShowImage {
        height: 80px;
    }
    .language-dropdown {
        left: 5%;
    }
    .post-your-text, .initial-text {
        left: 5%;
    }
    .bottom-right-text{
        font-size: 8px;
    }
}


@media (max-width: 374px) {
    .find-your-text, .post-your-text, .initial-text {
        /* diff - 95px when was 116*/
        font-size: calc(var(--lang-font-size, 110px) - 28px);
    }
}

@media (min-width: 375px) {
    .find-your-text, .post-your-text,.initial-text {
        /* diff - 104 */
        font-size: calc(var(--lang-font-size, 110px) - 22px);
    }
}

@media (min-width: 380px) {
    .find-your-text, .post-your-text, .initial-text {
        /* diff - 107 */
        font-size: calc(var(--lang-font-size, 110px) - 16px);
    }
}

@media (min-width: 400px) and (max-width: 767px){
    .find-your-text, .post-your-text, .initial-text {
        /* diff - 115 */
        font-size: calc(var(--lang-font-size, 110px) - 12px);
    }
}

@media (min-width: 768px){
    .find-your-text, .post-your-text, .initial-text {
        /* base */
        font-size: var(--lang-font-size, 110px);
    }
}